import React, {Component} from 'react'
import {Card, Button} from 'antd'
import ReactEcharts from 'echarts-for-react'
export default class Line extends Component {
state = {
sales: [5, 20, 36, 10, 10, 20],
inventorys: [15, 30, 46, 20, 20, 40]
}
getOption = () => {
const {sales, inventorys} = this.state
return {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量', '库存']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data:sales
}, {
name: '库存',
type: 'line',
data: inventorys
}]
}
}
getOption2 = () => {
return {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
      },
      series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
}
update = () => {
const sales = this.state.sales.map(sale => sale + 1)
const inventorys = this.state.inventorys.map(inventory => inventory -1)
this.setState({
sales,
inventorys
})
}
render() {
return (
<div>
<Card>
<Button type='primary' onClick={this.update}>更新</Button>
</Card>
<Card title='折线图一'>
<ReactEcharts option={this.getOption()} style={{height: 300}}/>
</Card>
<Card title='折线图二'>
<ReactEcharts option={this.getOption2()} style={{height: 300}}/>
</Card>
</div>
)
}
}